<template>
  <div class="error">
    <!-- 内容部分 -->
    <div class="content">
      <!-- 导航 -->
      <NavBar title="" isTransparent navScorllColor="#FFF" isFixed />
      <!-- 内容 -->
      <div class="content-box">
        <img class="content-img" src="/image/404.svg" />
        <div class="content-desc">{{ $t("common.networkAnomaly") }}</div>
        <div class="content-btn" @click="jumpPage">{{ $t("common.home") }}</div>
      </div>
    </div>
  </div>
</template>
<script setup name="error">
import { navigateI18nTo } from "@/utils";
import * as MITO from "@zhj1214/qdjk-web";

const props = defineProps({
  error: Object,
});

// 错误信息
// {
//   url: string
//   statusCode: number
//   statusMessage: string
//   message: string
//   stack: any
// }
const { error } = toRefs(props);
// console.log("❌--加载错误页面：", error.value);

onMounted(() => {
  MITO.log({
    message: error.value.message,
    tag: "未知路由错误",
    level: "high",
    ex: error.value,
  });
});
const jumpPage = () => {
  navigateI18nTo({ path: "/mvp/coin/coin" });
};
</script>
<style lang="scss" scoped>
.error {
  position: relative;
  background-color: #f4f5f7;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
  padding-bottom: 33 * 2px;
  .content {
    background: linear-gradient(
      180deg,
      #e5f1ff 0%,
      rgba(236, 245, 255, 0) 100%
    );
    background-size: 100vh 250 * 2px;
    background-repeat: no-repeat;
    &-box {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
    }
    &-img {
      width: 200 * 2px;
      height: 200 * 2px;
      margin-top: 110 * 2px;
    }
    &-desc {
      position: absolute;
      top: 330 * 2px;
      font-size: 13 * 2px;
      color: #999da7;
    }
    &-btn {
      margin-top: 20 * 2px;
      display: inline-block;
      padding: 12 * 2px 50 * 2px;
      border-radius: 6 * 2px;
      background-color: #007bff;
      font-size: 15 * 2px;
      font-weight: 590;
      color: #fff;
    }
  }
}
</style>
